<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>{$title}</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="../xui/font/font-awesome/css/font-awesome.min.css" media="all">
		<link rel="stylesheet" href="../xui/css/xui.css"  media="all">
	</head>
	<style>
		.row {
			border-bottom: 1px solid #FFF9EC;
			margin-bottom: 15px;
		}
		.box {
			margin-top: 10px;
			margin-bottom: 10px;
			background: #99CCFF;
			border-right: 1px solid #333333;
			padding-top: 10px;
			padding-bottom: 10px;
			text-align: center;
		}
		.row .box:last-child {
			border: 0px;
		}
	</style>
	<body class="xui wrap">
		<div class="page-header">
			<h1>基于flex网格布局<a href="index.html" class="btn">返回</a></h1>
		</div>
		<div class="row" style="background:#ccc;">
			一个row一行
		</div>
		<div class="row">
			<div class="w1 box">
				w1
			</div>
			<div class="w2 box">
				w2
			</div>
			<div class="w3 box">
				w3
			</div>
			<div class="w4 box">
				w4
			</div>
			<div class="w5 box">
				w5
			</div>
			<div class="w5 box">
				w5
			</div>
			<div class="w10 box">
				w10=100px;
			</div>
			<div class="w20 box">
				w20=200px;
			</div>
			<div class="w30 box">
				w30=300px;
			</div>
		</div>
		<div class="row">
			<div class="col-1 bg-1 box">
				col-1=1/12
			</div>
			<div class="col-1 bg-1 box">
				col-1=1/12
			</div>
			<div class="col-1 bg-1 box">
				col-1=1/12
			</div>
			<div class="col-1 bg-1 box">
				col-1=1/12
			</div>
			<div class="col-1 bg-1 box">
				col-1=1/12
			</div>
			<div class="col-1 bg-1 box">
				col-1=1/12
			</div>
			<div class="col-1 bg-1 box">
				col-1=1/12
			</div>
			<div class="col-1 bg-1 box">
				col-1=1/12
			</div>
			<div class="col-1 bg-1 box">
				col-1=1/12
			</div>
			<div class="col-1 bg-1 box">
				col-1=1/12
			</div>
			<div class="col-1 bg-1 box">
				col-1=1/12
			</div>
			<div class="col-1 bg-1 box">
				col-1=1/12
			</div>
		</div>
		<div class="row">
			<div class="col-2 bg-2 box">
				col-2=2/12
			</div>
			<div class="col-2 bg-2 box">
				col-2=2/12
			</div>
			<div class="col-2 bg-2 box">
				col-2=2/12
			</div>
			<div class="col-2 bg-2 box">
				col-2=2/12
			</div>
			<div class="col-2 bg-2 box">
				col-2=2/12
			</div>
			<div class="col-2 bg-2 box">
				col-2=2/12
			</div>
		</div>
		<div class="row">
			<div class="col-3 bg-3 box">
				col-3=3/12
			</div>
			<div class="col-3 bg-3 box">
				col-3=3/12
			</div>
			<div class="col-3 bg-3 box">
				col-3=3/12
			</div>
			<div class="col-3 bg-3 box">
				col-3=3/12
			</div>
		</div>
		<div class="row">
			<div class="col-4 bg-4 box">
				col-4=4/12
			</div>
			<div class="col-4 bg-4 box">
				col-4=4/12
			</div>
			<div class="col-4 bg-4 box">
				col-4=4/12
			</div>
		</div>
		<div class="row">
			<div class="col-6 bg-5 box">
				col-6=6/12
			</div>
			<div class="col-6 bg-6 box">
				col-6=6/12
			</div>
		</div>
		<div class="row">
			<div class="col-12 bg-1 box">
				col-12=12/12
			</div>
		</div>
		<div class="row">
			<div class="x1 box">
				x1
			</div>
			<div class="x2 box">
				x2=x1*2
			</div>
			<div class="x3 box">
				x3=x1*3
			</div>
			<div class="x4 box">
				x4=x1*4
			</div>
			<div class="x6 box">
				x6=x1*6
			</div>
			<div class="x12 box">
				x12=x1*12
			</div>
		</div>
		<div class="row">
			<div class="w22 box m100">
				w22 m100
				<br>
				if(width<768px){width=100%};
			</div>
			<div class="x1 box">
				x1=剩下的空间都归我
			</div>
		</div>
	</body>
